// 获取DOM元素
var adver = document.getElementsByClassName('adver')[0];
var adverBtn = document.getElementsByClassName('adver-btn')[0];
var adverA = adver.children[0];

var searchMain = document.getElementsByClassName('search-main')[0];

var seekRecode = document.getElementsByClassName('seek-recode')[0];
var seekBtn = seekRecode.children[1].children[0];
var seekInput = document.getElementById('seek-input');
var seekBox = document.getElementsByClassName('seek-box')[0];

var panelTitle = document.getElementsByClassName('panel-title')[0];
var panelChid = panelTitle.children;
var panelWrap = document.getElementsByClassName('panel-wrap')[0];

var slideshow = document.getElementsByClassName('slideshow')[0];
var viewList = document.getElementsByClassName('view-list')[0];
var viewLi = viewList.children;
var viewLeft = document.getElementsByClassName('left')[0];
var viewRight = document.getElementsByClassName('right')[0];
var viewItem = document.getElementsByClassName('item');

var horseWrap = document.getElementsByClassName('horse-wrap')[0];
var horseView = document.getElementsByClassName('hourse-view');
var horseI = horseWrap.getElementsByTagName('i');
var horseImg = horseWrap.getElementsByTagName('img');

var originalPrev = document.getElementsByClassName('prev')[0];
var originalNext = document.getElementsByClassName('next')[0];
var originalNum = document.getElementsByClassName('num')[0];
var originalMain = document.getElementsByClassName('original-contant-main')[0];
var originalUl = originalMain.children;

var btnBack = document.getElementsByClassName('back')[0];

var chat = document.getElementsByClassName('chat')[0];
var chatChange = document.getElementsByClassName('chat-change')[0];
var chatMin = document.getElementsByClassName('chat-min')[0];
var chatTitle = document.getElementsByClassName('chat-title')[0];

// ______________________________________顶部新人专享______________________________________
var adverHigh = 0;
var adverAHigh = 0;
var adverInter = null;
// 延迟1s显示
setTimeout(function() {
    // 通过间歇定时器实现出现动画
    adverInter = setInterval(function() {
        adverHigh += 1;
        adverAHigh = adverHigh - 10;
        // 当新人专享盒子的高大于等于80时移除定时器
        if (adverHigh >= 80) {
            clearInterval(adverInter);
        }
        // 赋值给盒子和a标签的高
        adver.style.height = adverHigh + 'px';
        adverA.style.height = adverAHigh + 'px';
    }, 4)
}, 1000)

// 关闭顶部新人专享
adverBtn.onclick = function() {
    adver.style.display = 'none';
}


// ______________________________________吸附式头部______________________________________
var searchTop = searchMain.offsetTop + 80;
window.onscroll = function() {
    if (document.documentElement.scrollTop >= searchTop) {
        searchMain.style.position = 'fixed';
        searchMain.style.top = 0;
        searchMain.style.zIndex = 999;
        searchMain.style.boxShadow = '0 0 5px #999';
    } else {
        searchMain.style.position = 'static';
        searchMain.style.boxShadow = '0 0 0';
    }
}


// ______________________________________搜索记录______________________________________
// 点击input框显示搜索记录
seekInput.onclick = function() {
    seekRecode.style.display = 'block';
}

// 移出搜索输入框关闭搜索记录
seekBox.onmouseleave = function() {
    seekRecode.style.display = 'none';
}

// 防止移出搜索输入框未移除搜索记录时被关闭
seekRecode.onmouseenter = function() {
    seekRecode.style.display = 'block';
}

// 点击关闭按钮关闭搜索记录
seekBtn.onclick = function() {
    seekRecode.style.display = 'none';
}


// ______________________________________资讯公告栏tab切换______________________________________
for (var i = 1; i < panelChid.length; i++) {
    panelChid[i].index = i;
    panelChid[i].onclick = function() {
        // 排他
        for (var j = 1; j < panelChid.length; j++) {
            panelChid[j].className = '';
        }
        this.className = 'active';
        // 判断是否是公告栏,改变i的偏移量
        if (this.index == panelChid.length - 1) {
            panelChid[0].style.left = 122.1 + 'px';
        } else {
            panelChid[0].style.left = 11.1 + 'px';
        }
        var panelTarget = (this.index - 1) * panelWrap.children[0].offsetWidth;
        panelWrap.style.left = -panelTarget + 'px';
    }
}


// ______________________________________无缝轮播______________________________________
var viewCount = 0;
var viewNum = 0;
var slowTime = null;
var autoTime = null;
// 缓慢动画
function slow(dom, target) {
    clearInterval(slowTime);
    slowTime = setInterval(function() {
        if (dom.offsetLeft == target) {
            clearInterval(slowTime);
        } else {
            var speed = (target - dom.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            dom.style.left = dom.offsetLeft + speed + 'px';
        }
    }, 20)
}

// 给视图一个初始宽度
for (var i = 0; i < viewLi.length; i++) {
    viewLi[i].style.width = window.innerWidth + 'px';
}
viewList.style.width = viewLi.length * window.innerWidth + 'px';
// 当窗口变化时视图随着窗口大小变化而变化
window.onresize = function() {
    for (var i = 0; i < viewLi.length; i++) {
        viewLi[i].style.width = window.innerWidth + 'px';
    }
    viewList.style.width = viewLi.length * window.innerWidth + 'px';
}

//右按钮
viewRight.onclick = function() {
    viewNum++;
    viewCount++;
    // 当焦点序号大于最后一个时归零
    if (viewNum > viewItem.length - 1) {
        viewNum = 0;
    }
    // 当视图序号大于最后一个时将ul偏移量设为0，并将视图序号切为1
    if (viewCount > viewLi.length - 1) {
        viewList.style.left = 0;
        viewCount = 1;
    }
    // 排他
    for (var i = 0; i < viewItem.length; i++) {
        viewItem[i].className = 'item';
    }
    // 给相应的焦点样式
    viewItem[viewNum].className = 'item on';
    // 给相应的视图目标偏移量
    var viewTarget = viewCount * viewLi[0].offsetWidth;
    slow(viewList, -viewTarget);
}

//左按钮
viewLeft.onclick = function() {
    // 当焦点序号等于第一个时将序号切为最后一个序号加1
    if (viewNum == 0) {
        viewNum = viewItem.length;
    }
    // 当视图序号等于第一个时将ul偏移量设为最后一个视图的偏移量，并将视图序号切为最后一个
    if (viewCount == 0) {
        viewList.style.left = -viewLi[viewLi.length - 1].offsetLeft + 'px';
        viewCount = viewLi.length - 1;
    }
    viewNum--;
    viewCount--;
    // 排他
    for (var i = 0; i < viewItem.length; i++) {
        viewItem[i].className = 'item';
    }
    // 给相应的焦点样式
    viewItem[viewNum].className = 'item on';
    // 给相应的视图目标偏移量
    var viewTarget = viewCount * viewLi[0].offsetWidth;
    slow(viewList, -viewTarget);
}

// 鼠标移入视图显示按钮并暂停自动
slideshow.onmouseenter = function() {
    viewLeft.style.display = 'block';
    viewRight.style.display = 'block';
    clearInterval(autoTime);
}

//  鼠标移出视图隐藏按钮并继续自动
slideshow.onmouseleave = function() {
    viewLeft.style.display = 'none';
    viewRight.style.display = 'none';
    viewAuto();
}

//自动轮播
function viewAuto() {
    clearInterval(autoTime);
    autoTime = setInterval(function() {
        viewRight.onclick();
    }, 2000)
}
viewAuto();

// 焦点轮播
for (var i = 0; i < viewItem.length; i++) {
    viewItem[i].index = i;
    viewItem[i].onclick = function() {
        // 排他
        for (var j = 0; j < viewItem.length; j++) {
            viewItem[j].className = 'item';
        }
        // 给相应的焦点样式
        this.className = 'item on';
        // 给相应的视图偏移量
        var viewTarget = this.index * viewLi[0].offsetWidth;
        slow(viewList, -viewTarget);
        // 将按钮和自动轮播的序号与焦点实时绑定
        viewCount = this.index;
        viewNum = this.index;
    }
}


// ______________________________________走马灯______________________________________
var horseTime = null;
var horseNum = horseWrap.offsetLeft;

function horseAuto() {
    horseTime = setInterval(function() {
        // 使用中间变量设置走马灯的偏移速度
        horseNum -= 0.5;
        // 当偏移量大于等于盒子的一半时
        if (-horseNum >= horseWrap.offsetWidth / 2) {
            // 使盒子重置偏移量
            horseWrap.style.left = -1 + 'px';
            // 将新的偏移量赋给中间变量
            horseNum = horseWrap.offsetLeft;
        }
        horseWrap.style.left = horseNum + 'px';
    }, 20)
}
horseAuto();
// 鼠标移入走马灯盒子暂停自动动画
horseWrap.onmouseenter = function() {
    clearInterval(horseTime);
}

// 鼠标移出走马灯盒子继续自动动画
horseWrap.onmouseleave = function() {
    horseAuto();
}


for (var i = 0; i < horseView.length; i++) {
    horseView[i].index = i;
    // 鼠标移入每个品牌显示边框及商标提示
    horseView[i].onmouseenter = function() {
        horseImg[this.index].style.borderColor = '#2aa3ff';
        horseI[this.index].style.opacity = 1;
    }

    // 鼠标移出隐藏边框及商标提示
    horseView[i].onmouseleave = function() {
        horseImg[this.index].style.borderColor = 'transparent';
        horseI[this.index].style.opacity = 0;
    }
}


// ______________________________________原装现货轮播______________________________________
var originalCount = 0;
var originalTime = null;
var originalAutoTime = null;
// 缓慢动画
function originalSlow(dom, target) {
    clearInterval(originalTime);
    originalTime = setInterval(function() {
        if (dom.offsetLeft == target) {
            clearInterval(originalTime);
        } else {
            var speed = (target - dom.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            dom.style.left = dom.offsetLeft + speed + 'px';
        }
    }, 20)
}

// 右按钮
originalNext.onclick = function() {
    originalCount++;
    // 当视图序号大于最后一个时将盒子偏移量设为0，并将视图序号切为1
    if (originalCount > originalUl.length - 1) {
        originalMain.style.left = 0;
        originalCount = 1;
    }
    // 当视图序号等于3时使originalNum的内容为1
    if (originalCount == 3) {
        originalNum.innerText = 1;
    } else {
        originalNum.innerText = originalCount + 1;
    }
    var originalTarget = originalCount * originalUl[0].offsetWidth;
    originalSlow(originalMain, -originalTarget);
}

// 左按钮
originalPrev.onclick = function() {
    // 当视图序号等于第一个时将ul偏移量设为最后一个视图的偏移量，并将视图序号切为最后一个
    if (originalCount == 0) {
        originalMain.style.left = -originalUl[originalUl.length - 1].offsetLeft + 'px';
        originalCount = originalUl.length - 1;
    }
    originalCount--;
    // 当视图序号等于3时使originalNum的内容为1
    if (originalCount == 3) {
        originalNum.innerText = 1;
    } else {
        originalNum.innerText = originalCount + 1;
    }
    var originalTarget = originalCount * originalUl[0].offsetWidth;
    originalSlow(originalMain, -originalTarget);
}

// 自动轮播
function originalAuto() {
    clearInterval(originalAutoTime);
    originalAutoTime = setInterval(function() {
        originalNext.onclick();
    }, 2500)
}
originalAuto();
// 鼠标进入暂停自动
originalMain.onmouseenter = function() {
    clearInterval(originalAutoTime);
}

// 鼠标移出继续自动
originalMain.onmouseleave = function() {
    originalAuto();
}


// ______________________________________返回顶部______________________________________
var backTime = null;
var backNum = 0;

btnBack.onclick = function(e) {
    // 事件对象兼容写法
    var e = e || window.event;
    // 阻止默认行为
    e.preventDefault();
    clearInterval(backTime);
    backTime = setInterval(function() {
        // 当文档被卷上去的距离大于0时减少
        if (document.documentElement.scrollTop > 0) {
            document.documentElement.scrollTop -= 100;
        } else {
            clearInterval(backTime);
        }
    }, 40)
}


// ______________________________________展开收缩聊天框______________________________________
//最小化聊天框
chatMin.onclick = function() {
    chat.style.display = 'none';
    chatChange.style.display = 'block';
}

// 展开聊天框
chatChange.onclick = function() {
    chat.style.display = 'block';
    chatChange.style.display = 'none';
}

// 拖动聊天框
chatTitle.onmousedown = function(e) {
    var e = e || window.event;
    // 获取鼠标在标题框中的位置
    var chatX = e.clientX - chat.offsetLeft;
    var chatY = e.clientY - chat.offsetTop;
    chatTitle.onmousemove = function(e) {
        var e = e || window.event;
        // 获取聊天框偏移量的值
        var x = e.clientX - chatX;
        var y = e.clientY - chatY;
        chat.style.left = x + 'px';
        chat.style.top = y + 'px';
    }
}

// 鼠标抬起时清除鼠标移动事件
window.onmouseup = function() {
    chatTitle.onmousemove = null;
}